<template>
  <div>
    <div id="zyh" ref="text">{{text}}</div>
    <button @click="handleWidth">计算宽度</button>
    <div class="new-css3">
      <div>
        <div class="class">第一个div</div>
        <span class="class">特性1</span>
        <span class="class">特性2</span>
        <span class="class">特性3 </span>
        <div class="sanceng">
          <div>
            <p>嘿嘿</p> 
            <div>三层最底层特性</div>
          </div>
          <div>
            <p>嘻嘻</p>
            <div>三层最底层特性2</div>
          </div>
        </div>
      </div>
    </div>

    <div class="quanzhong">
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div class="quanzhong10">
                          中心
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // text: ''
    }
  },
  props: {
    text: {
      default: '',
      type: String
    }
  },
  // watch: {
  //   text () {
  //     this.$nextTick(() => {
  //       let ddd = this.$refs.text.clientHeight
  //       console.log(ddd)
  //     })
  //   }
  // },
  created () {
    // console.log('child-created')
  },
  mounted () {
    // console.log('child-mounted')
    // console.log(this.$refs.text.clientHeight)
    this.$nextTick(() => {
      let ddd = this.$refs.text.clientHeight
      console.log(ddd)
    })
  },
  methods: {
    // 这边可以获取到，但是要等到异步加载完成之后才能获取到
    handleWidth () {
      let ddd = this.$refs.text.clientHeight
      console.log(ddd)
    }
  }
}
</script>

<style scoped lang="scss">
  // div[class^="new"] {
  //   color: red
  // }
  .new-css3 div span:first-child {
    color: red
  }
  .new-css3 div span:first-of-type {
    color: blue
  }
  .new-css3 div div:only-of-type {
    color: yellow
  }
  .sanceng div:nth-child(1) {
    color: red
  }
 
  .quanzhong .quanzhong10 {
    border: 5px solid #2826ac
  }
   .quanzhong div>div>div>div>div>div>div>div>div>div { // > 子选择器的权值为0，所以在这里不会起作用 div:1, class和伪类:10, id:100, style和伪元素:1000
    border: 1px solid #000
  } 
</style>
